@layer components {
  html {
    @apply w-full h-full;
  }

  body {
    @apply font-sans text-gray-900 w-full h-full antialiased;
  }

  @screen md {
    body {
      scrollbar-width: thin;
      scrollbar-color: theme("colors.gray.400") theme("colors.gray.100");
    }
    ::-webkit-scrollbar {
      width: 12px;
    }
    ::-webkit-scrollbar-track {
      background: theme("colors.gray.100");
      border-radius: 8px;
    }
    ::-webkit-scrollbar-thumb {
      background-color: theme("colors.gray.400");
      border-radius: 6px;
      border: 3px solid theme("colors.gray.100");
    }
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-bold;
  }

  h1 {
    @apply text-4xl;
  }

  h2 {
    @apply text-2xl;
  }

  h3 {
    @apply text-xl;
  }

  h4 {
    @apply text-lg;
  }

  h5 {
    @apply text-base;
  }

  h6 {
    @apply text-sm;
  }

  /* Input */

  input:disabled,
  .disabled {
    @apply cursor-not-allowed bg-gray-50 text-gray-600;
  }

  /* Accessible File Input */

  input,
  textarea {
    @apply bg-white;
  }
  .form-input__file-sr-only {
    position: absolute;
    margin: -1px;
    width: 1px;
    height: 1px;
    border: 0;
    clip: rect(0, 0, 0, 0);
    overflow: hidden;
  }

  .form-input__file-label {
    cursor: pointer;
  }

  .form-input__file-sr-only:focus + .form-input__file-label {
    outline: none;
    box-shadow: 0 0 0 3px theme("colors.primary.100");
    border-color: theme("colors.primary.300");
  }

  /* Button */
  button {
    text-align: initial;
  }

  button:focus {
    outline: none;
  }

  .btn {
    @apply inline-flex text-center items-center justify-center whitespace-nowrap text-sm font-semibold py-2 px-4 rounded cursor-pointer focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-focusColor-500 transition;
  }

  .btn:disabled {
    opacity: 0.5;
  }

  /* Button Styles */

  .btn-default {
    @apply bg-primary-50 text-primary-500 border border-primary-500 rounded !important;
  }

  .btn-default:hover {
    @apply bg-primary-100 text-primary-600 !important;
  }

  .btn-default:focus {
    @apply bg-primary-100 text-primary-700;
  }

  .btn-subtle {
    @apply bg-gray-100 text-gray-800  !important;
  }

  .btn-subtle:hover {
    @apply bg-gray-300 text-gray-900;
  }

  .btn-subtle:focus {
    @apply bg-gray-400 text-gray-900;
  }

  .btn-primary {
    @apply bg-gradient-to-br from-primary-500 to-primary-600 text-white dark:text-primary-50 shadow dark:from-primary-500 dark:to-primary-400 !important;
  }

  .btn-primary:hover {
    @apply bg-gradient-to-br from-primary-600 to-primary-700 text-white !important;
  }

  .btn-primary:focus {
    @apply bg-primary-800 text-white;
    background-image: none;
  }

  .btn-primary-ghost {
    @apply bg-white text-primary-500 border border-primary-500;
  }

  .btn-primary-ghost:hover {
    @apply bg-primary-100 text-primary-600 border-primary-400;
  }

  .btn-primary-ghost:focus {
    @apply bg-primary-100 text-primary-600 border-primary-400;
  }

  .btn-secondary {
    @apply bg-primary-500 text-white  !important;
  }

  .btn-secondary:hover {
    @apply bg-primary-600;
  }

  .btn-secondary:focus {
    @apply bg-primary-800;
    background-image: none;
  }

  .btn-success {
    @apply bg-gradient-to-br from-green-500 to-green-600 text-white !important;
  }

  .btn-success:hover {
    @apply bg-gradient-to-br from-green-600 to-green-700;
  }

  .btn-success:focus {
    @apply bg-green-800;
    background-image: none;
  }

  .btn-warning {
    @apply bg-gradient-to-br from-yellow-500 to-yellow-600 text-white  !important;
  }

  .btn-warning:hover {
    @apply bg-gradient-to-br from-yellow-600 to-yellow-700;
  }

  .btn-warning:focus {
    @apply bg-yellow-800;
    background-image: none;
  }

  .btn-danger {
    @apply bg-gradient-to-br from-red-500 to-red-600 text-white  !important;
  }

  .btn-danger:hover {
    @apply bg-gradient-to-br from-red-600 to-red-700 text-red-50;
  }

  .btn-danger:focus {
    @apply bg-red-800 text-red-50 bg-none;
  }

  button:disabled,
  .disabled {
    @apply cursor-not-allowed bg-gray-100 text-gray-300 shadow-none border-transparent;
    background-image: none;
  }

  button:disabled:hover,
  .disabled:hover,
  button:disabled:focus,
  .disabled:focus {
    @apply bg-gray-100 text-gray-300 border-transparent shadow-none;
    background-image: none;
  }

  .btn-small {
    @apply py-1 px-3 text-xs h-7 leading-normal;
  }

  .btn-normal {
    @apply py-1 px-4 text-sm h-8;
  }

  .btn-large {
    @apply py-2 px-5 text-base h-10;
  }

  .button-xl {
    @apply py-2 px-6 text-base h-12;
  }

  /* Footer Style */

  .footer__container {
    background-color: theme("colors.gray.100");
  }

  .footer__bottom {
    background-color: theme("colors.gray.200");
  }

  .dropdown__list {
    max-height: 16rem;
    @apply min-w-full;
  }

  @screen md {
    .dropdown__list {
      max-height: 20rem;
      @apply w-auto min-w-full;
    }
  }
  .dropdown__list-right {
    @apply end-0;
  }

  .dropdown__list-left {
    @apply start-0;
  }

  .dropdown__list-left:before,
  .dropdown__list-left:after {
    position: absolute;
    content: "";
    display: inline-block;
  }

  .dropdown__list-left:before {
    top: -7px;
    left: 9px;
    border-right: 7px solid transparent;
    border-bottom: 7px solid theme("colors.gray.400");
    border-left: 7px solid transparent;
    border-bottom-color: theme("colors.gray.400");
  }

  .dropdown__list-left:after {
    top: -6px;
    left: 10px;
    border-right: 6px solid transparent;
    border-bottom: 6px solid theme("colors.white");
    border-left: 6px solid transparent;
  }

  .dropdown__list-right:before,
  .dropdown__list-right:after {
    position: absolute;
    content: "";
    display: inline-block;
  }

  .dropdown__list-right:before {
    top: -7px;
    inset-inline-end: 9px;
    border-inline-end: 7px solid transparent;
    border-bottom: 7px solid theme("colors.gray.300");
    border-inline-start: 7px solid transparent;
    border-bottom-color: theme("colors.gray.300");
  }

  .dropdown__list-right:after {
    top: -6px;
    inset-block-end: 10px;
    border-inline-end: 6px solid transparent;
    border-bottom: 6px solid theme("colors.white");
    border-inline-start: 6px solid transparent;
  }

  /* Checkbox */
  .input-checkbox {
    @apply appearance-none p-0;
  }
  .input-checkbox:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
    border-color: transparent;
    background-color: currentColor;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
  }

  /* Dark mode theme*/
  .dark {
    --color-black: 255 255 255;
    --color-white: 15 13 18;

    --color-primary-50: 23 18 31;
    --color-primary-100: 60 44 81;
    --color-primary-200: 95 70 129;
    --color-primary-300: 134 97 181;
    --color-primary-400: 170 124 231;
    --color-primary-500: 189 137 255;
    --color-primary-600: 200 157 255;
    --color-primary-700: 210 176 255;
    --color-primary-800: 222 197 255;
    --color-primary-900: 232 216 255;
    --color-primary-950: 248 245 252;

    --color-gray-50: 5 5 6;
    --color-gray-100: 19 17 21;
    --color-gray-200: 26 23 29;
    --color-gray-300: 55 50 61;
    --color-gray-400: 113 105 125;
    --color-gray-500: 142 131 158;
    --color-gray-600: 171 158 191;
    --color-gray-700: 200 185 223;
    --color-gray-800: 229 212 255;
    --color-gray-900: 243 236 255;
    --color-gray-950: 243 236 255;

    --color-focusColor-50: 14 14 30;
    --color-focusColor-100: 33 34 77;
    --color-focusColor-200: 51 53 123;
    --color-focusColor-300: 70 73 171;
    --color-focusColor-400: 89 92 218;
    --color-focusColor-500: 99 102 241;
    --color-focusColor-600: 128 129 244;
    --color-focusColor-700: 156 155 247;
    --color-focusColor-800: 186 183 249;
    --color-focusColor-900: 214 209 252;
    --color-focusColor-950: 221 215 253;

    --color-red-50: 28 11 12;
    --color-red-100: 75 24 25;
    --color-red-200: 121 36 37;
    --color-red-300: 169 49 50;
    --color-red-400: 216 61 62;
    --color-red-500: 239 68 68;
    --color-red-600: 240 101 105;
    --color-red-700: 240 135 143;
    --color-red-800: 242 169 180;
    --color-red-900: 242 203 218;
    --color-red-950: 243 210 226;

    --color-yellow-50: 28 22 6;
    --color-yellow-100: 74 57 6;
    --color-yellow-200: 119 91 7;
    --color-yellow-300: 165 127 8;
    --color-yellow-400: 211 161 8;
    --color-yellow-500: 234 179 8;
    --color-yellow-600: 236 190 57;
    --color-yellow-700: 237 201 107;
    --color-yellow-800: 240 214 156;
    --color-yellow-900: 241 225 206;
    --color-yellow-950: 242 228 217;

    --color-orange-50:  29 16 7;
    --color-orange-100: 78 38 11;
    --color-orange-200: 126 59 14;
    --color-orange-300: 176 82 17;
    --color-orange-400: 225 104 21;
    --color-orange-500: 249 115 22;
    --color-orange-600: 248 139 69;
    --color-orange-700: 246 163 115;
    --color-orange-800: 246 188 162;
    --color-orange-900: 244 212 208;
    --color-orange-950: 244 217 218;

    --color-blue-50: 14 14 30;
    --color-blue-100: 33 34 77;
    --color-blue-200: 51 53 123;
    --color-blue-300: 70 73 171;
    --color-blue-400: 89 92 218;
    --color-blue-500: 99 102 241;
    --color-blue-600: 128 129 244;
    --color-blue-700: 156 155 247;
    --color-blue-800: 186 183 249;
    --color-blue-900: 214 209 252;
    --color-blue-950: 221 215 253;

    --color-green-50: 7 24 15;
    --color-green-100: 13 62 32;
    --color-green-200: 19 100 50;
    --color-green-300: 25 139 68;
    --color-green-400: 31 178 86;
    --color-green-500: 34 197 94;
    --color-green-600: 76 205 126;
    --color-green-700: 117 212 158;
    --color-green-800: 160 221 191;
    --color-green-900: 201 228 223;
    --color-green-950: 211 230 230;

    --font-family-sans: "Inter", sans-serif;
  }
}

.dark .logo_on_light_bg {
  display: none;
}

.dark .logo_on_dark_bg {
  display: block;
}

.dark .icon_on_light_bg {
  display: none;
}

.dark .icon_on_dark_bg {
  display: block;
}
